<!DOCTYPE html>
<html>
<head>
    <title>Hover Zoom Options</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <style type="text/css">
        #body {
            margin: 0 auto;
            width: 50em;
        }

        #container {
            float: left;
            margin: 1em;
        }

        #icon {
            float: left;
            margin-top: 2em
        }

        #tabs {
            width: 30em;
            min-height: 19em;
        }

        #tabs li {
            font-size: 10pt;
        }

        #title {
            font-size: 1.5em
        }

        #selExcludedSites, #txtAddExcludedSite {
            width: 23em;
        }

        #excludedSites button {
            width: 5em;
        }

        #messages {
            padding: 1em;
            max-width: 28em;
            height: 3em;
        }

        #saved {
            display: none;
            background-color: #ffd;
            padding: .5em;
        }

        #saved p {
            font-size: 9pt;
        }

        #title, #buttons, #about, #about p, #messages p {
            text-align: center
        }

        #delays p, #delays input, #txtPicturesOpacity {
            text-align: right
        }

        .notice {
            font-size: 8pt;
        }

        .hint {
            font-size: 8pt;
            padding-left: 25px;
            display: block;
        }

        .hint, .hint a {
            color: #555;
        }

        #sliderPicturesOpacity {
            font-size: 0.7em;
            margin-bottom: 0.5em
        }

        hr {
            margin: 0.7em 0
        }

        .actionKey {
            line-height: 14px;
            margin-top: 10px;
        }

        #optionTab5 p {
            margin-bottom: 10px;
        }
    </style>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/jquery-ui.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/options.js"></script>
</head>
<body>
<div id="body">
    <img id="icon" src="../images/icon128.png">

    <div id="container">
        <h1 id="title">Hover Zoom Options</h1>

        <div id="tabs">
            <ul>
                <li><a href="#optionTab1">General</a></li>
                <li><a href="#optionTab2">Sites</a></li>
                <li><a href="#optionTab3">Action keys</a></li>
                <li><a href="#optionTab4">Advanced</a></li>
                <li><a href="#optionTab5">Support the project</a></li>
            </ul>
            <div id="optionTab1">
                <p><input type="checkbox" id="chkExtensionEnabled"> <label for="chkExtensionEnabled">Enable Hover
                    Zoom</label></p>

                <h2>View</h2>

                <p><input type="checkbox" id="chkMouseUnderlap"> <label for="chkMouseUnderlap">Extend zoomed images
                    below the mouse cursor<br>
                    <span class="hint">If unchecked, zoomed images will be resized dynamically.</span></label></p>

                <p><input type="checkbox" id="chkPageActionEnabled"> <label for="chkPageActionEnabled">Show icon in
                    address bar<br>
                    <span class="hint">(Only when images can be zoomed)</span></label></p>

                <p><input type="checkbox" id="chkShowCaptions"> <label for="chkShowCaptions">Show pictures captions<br>
                    <span class="hint">(When available)</span></label></p>

                <p><input type="checkbox" id="chkShowWhileLoading"> <label for="chkShowWhileLoading">Show zoomed
                    pictures while loading</label></p>

                <p><input type="checkbox" id="chkShowHighRes"> <label for="chkShowHighRes">Show high resolution pictures
                    when available<br>
                    <span class="hint">Pictures may take more time to load.</span></label></p>

                <h2>Delays</h2>

                <div id="delays">
                    <p><label for="txtDisplayDelay">Delay before displaying a picture</label>: <input type="text"
                                                                                                      id="txtDisplayDelay"
                                                                                                      size="2"> sec.</p>

                    <p><label for="txtFadeDuration">Fading animation duration</label>: <input type="text"
                                                                                              id="txtFadeDuration"
                                                                                              size="2"> sec.</p>
                </div>
            </div>
            <div id="optionTab2">
                <h2><span id="Dis-enable">Disable</span> Hover Zoom for specific sites</h2>

                <p>Enter URLs for which Hover Zoom must be <span id="Dis-enabled">disabled</span>.</p>

                <p><i>Examples: facebook.com, google.com/reader</i></p>
                <table id="excludedSites">
                    <tr>
                        <td><input type="text" id="txtAddExcludedSite"></td>
                        <td>
                            <button id="btnAddExcludedSite">Add</button>
                        </td>
                    </tr>
                    <tr>
                        <td><select id="selExcludedSites" size="8"></select></td>
                        <td>
                            <button id="btnRemoveExcludedSite">Remove</button>
                            <br>
                            <button id="btnClearExcludedSites">Clear</button>
                        </td>
                    </tr>
                </table>
                <p class="notice">Be aware that domain filters can overlap. Example: if you have filtered
                    "picasaweb.google.com" and "google.com", removing "picasaweb.google.com" will not reactivate Picasa
                    Web Albums, as it will still be excluded by the "google.com" filter.</p>

                <h2><input type="checkbox" id="chkWhiteListMode"> <label for="chkWhiteListMode">White list mode</label>
                </h2>

                <p>If this box is checked, Hover Zoom will be enabled <em>only</em> for the sites listed above.</p>
            </div>
            <div id="optionTab3">
                <table id="tableActionKeys">
                </table>
            </div>
            <div id="optionTab4">
                <h2>Advanced options</h2>

                <p><input type="checkbox" id="chkUpdateNotifications"> <label for="chkUpdateNotifications">Show update
                    notifications</label><br>
                    <span class="hint"><a id="aShowUpdateNotification" href="javascript:">Show latest</a></span></p>

                <p><input type="checkbox" id="chkAddToHistory"> <label for="chkAddToHistory">Add viewed pictures to the
                    browser's history</label></p>

                <p><input type="checkbox" id="chkFilterNSFW"> <label for="chkFilterNSFW">Exclude NSFW images (Reddit
                    only)</label></p>

                <p><input type="checkbox" id="chkAlwaysPreload"> <label for="chkAlwaysPreload">Automatically preload
                    zoomed images<br>
                    <span class="hint">(This may slow down browsing and consume a lot of bandwidth)</span></label></p>
                    
                <p><input type="checkbox" id="chkEnableGalleries"> <label for="chkEnableGalleries">Enable albums support</label></p>

                <p><input type="checkbox" id="chkEnableStats"> <label for="chkEnableStats">Enable anonymous usage statistics<br>
                    <span class="hint">Turning this off will disable data submission to any third party</span></label></p>
                
                <hr>
                <p><label for="txtPicturesOpacity">Zoomed pictures opacity</label>: <input type="text"
                                                                                           id="txtPicturesOpacity"
                                                                                           size="2"> %

                <div id="sliderPicturesOpacity"></div>
                <div class="notice"><span>Transparent</span><span style="float: right">Opaque</span></div>
                </p>
            </div>
            <div id="optionTab5">
                <h2>Support Hover Zoom Development</h2>

                <p>Hover Zoom is distributed for free and is supported via affiliate links. You can show your support to
                    the project by keeping this option enabled, or you can disable it.</p>

                <p><b>What will happen if I enable affiliate links?</b><br>
                    Some ads will be displayed amongst Facebook and Reddit regular ads every once in a while. These ads
                    were designed to be unobtrusive and won't degrade your user experience. Hover Zoom does not block or
                    replace existing ads.</p>

                <p>Note: affiliate links won't be displayed if you use an ad blocking extension such as AdBlock.</p>

                <p><b>Will I lose functionality if I disable affiliate links?</b><br>
                    No, enabling affiliate links is only a way to show your support to the project's development.</p>

                <p><input type="radio" id="radEnableAds" name="radEnableAds" class="radEnableAds" value="1"> <label
                        for="radEnableAds"><b>Yes, I want to support this project by enabling affiliate links.</b>
                </label></p>

                <p><input type="radio" id="radDisableAds" name="radEnableAds" class="radEnableAds" value="2"> <label
                        for="radDisableAds">No, I don't want to enable affiliate links.</label></p>

                <p id="pAdsMessage">Thanks for your support!</p>
                <input type="hidden" id="hidEnableAds">
            </div>
        </div>
        <div id="buttons">
            <button id="btnSave">Save</button>
            <button id="btnReset">Reset</button>
        </div>
        <div id="messages">
            <div id="saved"><p>Options saved.<br>Some settings may need a page refresh.</p></div>
        </div>
        <div id="about">
            <!--<p><g:chrome-web-store widgettype="ratingreview" appid="nonjdcjchghhkdoolnlbekcfllmednbl"></g:chrome-web-store></p>
            <script type="text/javascript" src="https://chrome.google.com/webstore/widget/developer/scripts/widget.js"></script>-->
            <p><a target="_blank" href="http://hoverzoom.net/">Home page</a> -
                <a target="_blank" href="http://code.google.com/p/hoverzoom/issues/list">Report a bug</a></p>

            <!-- Google +1 -->
            <div class="g-plusone" data-size="small"
                 data-href="https://chrome.google.com/webstore/detail/nonjdcjchghhkdoolnlbekcfllmednbl"></div>
            <script src="../js/g-plusone.js"></script>

            <!-- Facebook Like -->
            <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FHover-Zoom%2F121453051234637&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21&amp;ref=options_page"
                    style="border:none; overflow:hidden; width:100px; height:21px; vertical-align: middle;"></iframe>

            <p><a target="_blank"
                  href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VFR76YFQNPC64">Donations
                appreciated</a>!
            </p>

            <p>Version <span id="versionNumber"></span> - &copy; 2012 Romain Vallet</p>
        </div>
    </div>
</div>
</body>
</html>